<template>
    <div class="login-panel">
        <h1 class="title">{{ title }}</h1>
        <el-tabs type="border-card" stretch v-model="currentTab">
            <el-tab-pane name="account">
                <template #label>
                    <span><el-icon><UserFilled /></el-icon>账号登录</span>
                </template>
                <LoginAccount ref="loginAccount" @onSuccess="onLoginSuccess" />
            </el-tab-pane>
            <el-tab-pane name="phone">
                <template #label>
                    <span><el-icon><Iphone /></el-icon>手机登录</span>
                </template>
                手机登录
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script lang="ts" setup>
import type { LoginAuthorization } from '@/api/auth/types'
import LoginAccount from './login-account.vue'
import { useUserStore } from '@/store/modules/user'
import { useApplicationStore } from '@/store/modules/application';
import * as application from '@/api/application'

const title = import.meta.env.VITE_APP_TITLE

const loginAccount = ref<InstanceType<typeof LoginAccount>>()

const currentTab = ref('account')

const router = useRouter()

const onLoginSuccess = async (data: LoginAuthorization) => {
    const userStore =  useUserStore()
    userStore.setUserId(data.userId)
    userStore.setName(data.name)
    userStore.setToken(data.token)
    userStore.setPermissions(data.authorizations)

    
    const groups: OptionGroup[] = await application.getGroupOptions()
    const applicationStore = useApplicationStore()

    applicationStore.setGroups(groups)
    if(groups.length > 0 && groups[0].options.length > 0) {
        applicationStore.setName(groups[0].options[0].label)
        applicationStore.setCode(groups[0].options[0].value)
    } else {
        applicationStore.setName('')
        applicationStore.setCode('')
    }

    router.push('/main')
}
</script>

<style scoped lang="scss">
.login-panel {
    margin-bottom: 150px;
    min-width: 400px;
    max-width: 40%;
    .title {
        text-align: center;
    }
}
</style>